<template>
  <div class="page">
    <div v-if="status == 0">
      <div class="logo-title">abcd69</div>
      <div class="ipt-box">
        <div class="ipt-main">
          <div class="ipt-header">Create account</div>
          <div class="ipt-item">
            <div class="ipt-item-title">Email</div>
            <van-field class="ipt-item-input" v-model="email" />
          </div>
          <div class="ipt-item">
            <div class="ipt-item-title">Create a password</div>
            <van-field
              class="ipt-item-input"
              v-model="password"
              :type="showPassword ? 'text' : 'password'"
            />
            <div class="ipt-info">Minimum 6 characters required</div>
          </div>
          <div class="show-psd">
            <van-checkbox
              v-model="showPassword"
              shape="square"
              checked-color="#273458"
              >Show password</van-checkbox
            >
          </div>
        </div>
        <div class="confirm-box">
          <van-button class="confirm-btn" @click="sendEmail"
            >Verify email</van-button
          >
        </div>
        <div class="login-box">
          <van-button class="confirm-btn" @click="goLogin"
          >Log in</van-button
          >
        </div>
      </div>
    </div>

    <div class="mail-box" v-if="status == 1">
      <div class="mail-box-title">Verify email address</div>
      <div class="mail-box-info">
        To Verify your email, We've sent a One time password (OTP) to email
      </div>
      <div class="ipt-item">
        <div class="ipt-item-title">Enter OTP</div>
        <van-field class="ipt-item-input" v-model="code" />
      </div>
      <van-button class="confirm-btn" @click="register"
        >Create your account</van-button
      >
      <van-button class="confirm-btn" @click="goLogin"
      >Log in</van-button
      >
      <div class="mail-box-info-text">
        By creating an account,you agree to conditions of use and Privacy
        Notict.
      </div>
      <div class="reset-box" @click="sendEmail">Resend OTP</div>
    </div>

    <div class="info-box" v-if="status == 2">
      <div class="logo-title">abcd69</div>
      <div class="info-main">
        <div class="info-img-box">
          <img
            class="info-img"
            src="../../assets/images/login/success.png"
            alt=""
          />
        </div>
        <div class="info-text">恭喜注册完成</div>
        <van-button class="info-btn" @click="login">确认登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  apiGetVerificationCode,
  apiRegister,
  apiForgotEmail,
  apiLoginApp,
} from "../../request/api";
export default {
  name: "register",
  data() {
    return {
      email: "",
      password: "",
      code: "",
      status: 0,
      showPassword: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    sendEmail() {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      const pass = /(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W]).{6,}/;
      if (!mailReg.test(this.email)) {
        this.$toast.success("邮箱格式不正确");
      }else if(!pass.test(this.password)){
        this.$toast.success("密码不可少于六位数");
      }else{
        apiGetVerificationCode(this.email).then((res) => {
          if (res.code == 200) {
            this.status = 1;
            // this.$toast.success(res.msg);
          }
        });
      }
    },
    goLogin() {
      this.$router.push("/login");
    },
    register() {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      const pass = /(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W]).{6,}/;
      if (!mailReg.test(this.email)) {
        this.$toast.success("邮箱格式不正确");
      }else if(!pass.test(this.password)){
        this.$toast.success("密码不可少于六位数");
      }else{
        apiForgotEmail({
          username: this.email,
          code: this.code,
        }).then((res) => {
          if (res.code == 200) {
            console.log(res);
            apiRegister({
              username: this.email,
              password: this.password,
            }).then((res) => {
              if (res.code == 200) {
                this.status = 2;
                console.log(res);
              } else {
                this.$toast.fail(res.msg);
              }
            });
          } else {
            this.$toast.fail(res.msg);
          }
        });
      }
    },
    login() {
      apiLoginApp({
        username: this.email,
        password: this.password,
      }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          localStorage.setItem("key", res.token);
          this.$toast.success(res.msg);
          this.$router.replace("/");
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.logo-title {
  font-size: 70px;
  font-weight: 800;
  color: #273458;
  margin: 166px auto 0;
  text-align: center;
}
.ipt-box {
  margin-top: 196px;
  padding: 0 56px;
  .ipt-main {
    .ipt-header {
      color: #273458;
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 40px;
    }
    .ipt-item {
      margin-bottom: 40px;
    }
    .ipt-item-title {
      color: #273458;
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .ipt-item-input {
      border: 1px solid #a6a6a6;
      height: 90px;
      align-items: center;
    }
    :deep(.van-field__control) {
      font-size: 28px;
    }
    .code-box {
      display: flex;
      align-items: center;
    }
    .code-item-input {
      border: 1px solid #a6a6a6;
      height: 90px;
      align-items: center;
      flex: 1;
    }
    .ipt-info {
      color: #273458;
      font-size: 26px;
      margin: 10px 0;
    }
    .show-psd {
      margin: 20px 0;
    }

    :deep(.van-checkbox__label) {
      font-size: 28px;
      line-height: 36px;
    }
    :deep(.van-checkbox__icon) {
      font-size: 36px;
    }
    .code-button {
      width: 262px;
      height: 90px;
      background: #273458;
      font-size: 26px;
      font-weight: 400;
      color: #ffffff;
      border: 1px solid #273458;
      box-sizing: border-box;
    }
  }
  .confirm-box {
    margin-top: 170px;
    .confirm-btn {
      width: 100%;
      height: 90px;
      background: #273458;
      box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
      border: 1px solid #ffffff;
      font-size: 26px;
      color: #ffffff;
      font-weight: 400;
    }
  }
  .login-box {
    margin-top: 25px;
    .confirm-btn {
      width: 100%;
      height: 90px;
      background: #273458;
      box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
      border: 1px solid #ffffff;
      font-size: 26px;
      color: #ffffff;
      font-weight: 400;
    }
  }
}
.info-box {
  padding: 0 90px;
  margin-top: 212px;
  .info-main {
    border: 1px solid #a6a6a6;
    padding: 51px 35px 20px;
    margin-top: 160px;

    .info-img-box {
      width: 78px;
      text-align: center;
      height: 78px;
      background: #21b66d;
      border-radius: 50%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .info-img {
      width: 30px;
      height: 21px;
    }
    .info-text {
      margin-top: 60px;
      font-size: 26px;
      font-weight: 400;
      color: #000000;
      text-align: center;
    }
    .info-btn {
      width: 100%;
      height: 73px;
      background: #273458;
      box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
      border: 1px solid #ffffff;
      font-size: 26px;
      color: #ffffff;
      font-weight: 400;
      margin-top: 60px;
    }
  }
}
.mail-box {
  padding: 0 40px;
  margin-top: 100px;
  .mail-box-title {
    margin: 0 0 40px;
    font-size: 30px;
    font-weight: 600;
    color: #273458;
  }
  .mail-box-info {
    margin: 0 0 70px;
    font-size: 26px;
    font-weight: 600;
    color: #273458;
  }
  .ipt-item {
    margin-bottom: 60px;
  }
  .ipt-item-title {
    color: #273458;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .ipt-item-input {
    border: 1px solid #a6a6a6;
    height: 90px;
    align-items: center;
  }
  :deep(.van-field__control) {
    font-size: 28px;
  }

  .confirm-btn {
    width: 100%;
    height: 90px;
    background: #273458;
    box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
    border: 1px solid #ffffff;
    font-size: 26px;
    color: #ffffff;
    font-weight: 400;
  }
  .mail-box-info-text {
    color: #273458;
    font-size: 26px;
    margin: 20px 0 60px;
  }
  .reset-box {
    color: #273458;
    font-size: 30px;
    text-align: center;
  }
}
</style>
